<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垃圾分类小窗口</title>
</head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.3/mobile/layer.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<body>
<div>
    <div role="button" class="search">
        <div class="form-group">
            <label for="garbage">请输入要搜索的垃圾：</label>
            <input type="text" name="garbage" class="form-control" id="garbage" placeholder="请输入要搜索的垃圾">
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" onclick="getGarbage()" lay-filter="demo1">查询</button>
            </div>
        </div>
    </div>
    <div role="button" class="search">
        <div class="form-group">
            <label for="garbage">请输入要搜索的垃圾：</label>
            <input type="file" name="garbage" class="form-control" id="file">
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" onclick="uploadPic()" lay-filter="demo1">AI识别</button>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table">
            <tr>
                <td id="one"></td>
                <td id="two"></td>
                <td id="three"></td>
                <td id="four"></td>
                <td id="five"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script>

    function getGarbage() {
        var garbageName = $("input[name='garbage']").val();
        console.log(garbageName)
        $.get('/garbage/getGarbage?garbageName=' + garbageName, function (result) {
            console.log(result)
            if (result.code == 200) {
                var arr1 = result.data;
                var gNames = "";
                $.each(arr1, function (i, val) {

                    gNames += val.gname + "  它属于" + val.gtype + '  <br>';
                });
                console.log(gNames)
                layer.open({

                    title: '查询结果',

                    content: gNames.toString()
                });
            }
        });
    }

    function uploadPic() {
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: '/garbage/uploadFile', /*接口域名地址*/
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            success: function (ret) {
                console.log(ret.data)
                var garbageName = ret.data[0]
                $.get('/garbage/getGarbage?garbageName=' + garbageName, function (result) {
                    console.log(result)
                    if (result.code == 200) {
                        var arr1 = result.data;
                        var gNames = "";
                        $.each(arr1, function (i, val) {

                            gNames += val.gname + "  它属于" + val.gtype + '  <br>';
                        });
                        console.log(gNames)
                        layer.open({

                            title: '查询结果',

                            content: gNames.toString()
                        });
                    }
                });
            }
    })
    }

    getRecent();

    function getRecent() {
        var garbageName = $("input[name='garbage']").val();
        console.log(garbageName)
        $.get('/garbage/recentGs', function (result) {
            console.log(result)
            if (result.code == 200) {
                var arr1 = result.data;
                var gNames = "";
                console.log(result.data);
                $("#one").html('<span class="s0" onclick="fill(' + arr1[0].gName + ')">'
                    + arr1[0].gName + '</span>' + "它属于" + arr1[0].gType);
                $("#two").text(arr1[1].gName + "它属于" + arr1[0].gType)
                $("#three").text(arr1[2].gName + "它属于" + arr1[0].gType)
                $("#four").text(arr1[3].gName + "它属于" + arr1[0].gType)
                $("#five").text(arr1[4].gName + "它属于" + arr1[0].gType)
            }
        });
    }

    function fill(data) {
        console.log(data);
        $("input[name='garbage']").val(data);
    }

</script>